<template>
  <div class="lg:w-10/12 md:w-10/12 sm:w-11/12 mb-w95 my-16 mx-auto bg-light-100">
    <div
      class="h-16 flex justify-start items-center border-b border-b-gray-300"
    >
      <span><h1 class="font-bold ml-16 text-xl">发布帖子</h1></span>
    </div>

    <ul class="draft lg:p-16 sm:py-8 ">
      <li>
        <span class="inline-flex leading-16">标题：</span>
        
        <el-input
          v-model="title"
          class="h-16"      
          maxlength="30"
          placeholder="标题"
          show-word-limit
          type="text"
        />
      </li>
      <li>
        <span class="inline-flex leading-16">内容：</span>
        <WangEditor @on-valueHtml="getValueHtml"></WangEditor>
      </li>
      <li class="flex items-center text-sm">
        <span class="inline-flex leading-16">分类：</span>
        <el-radio-group v-model="cate" >
          <el-radio label="综合">综合</el-radio>
          <el-radio label="攻略">攻略</el-radio>
          <el-radio label="资讯">资讯</el-radio>
          <el-radio label="话题">话题</el-radio>
        </el-radio-group>
      </li>
      <div class="flex justify-center items-center">
        <button
          @click="submit"
          class=" w-32 h-10 bg-blue-600 text-light rounded-lg hover:bg-blue-500"
        >
          发布帖子
        </button>
      </div>
      
    </ul>
  </div>

</template>

<script setup lang="ts">
import WangEditor from "@/plugins/editor/WangEditor.vue";
import { fetchAddTopic,fetchEditTopic } from "@/server";
import {  getMaterialSrc } from '@/utils/material'
import type { Ref } from "vue";


const props = defineProps<{
  topic?: any
}>()
const { topic } = toRefs(props)



//表单
let valueHtml: Ref<string> //内容
let editor:any
const getValueHtml = (d: Ref<string>,e:any) => {
  valueHtml = d;
  editor = e
};
//标题
const title = ref("");
//分类
const cate = ref("综合")
//router
const router = useRouter()
const route = useRoute()


const submit = async () => {
  const text = editor.getText().split(/\n/).join('')
  if(title.value===''){
    return ElMessage.error("标题不能为空");
  }
  if(valueHtml.value==='<p><br></p>'){
    return ElMessage.error("文章不能为空");
  }
  const imgArr = getMaterialSrc(valueHtml.value) 
  const formData = {
    title: title.value,
    content: valueHtml.value,
    cate: cate.value,
    text,
    imgArr,
  }
  if(route.params.id){
    await fetchEditTopic(route.params.id as string,formData)   
  }else{
    await fetchAddTopic(formData);
  }
  router.push("/bbs")

};


watchEffect(()=>{
  if (topic?.value) {
    title.value = topic?.value?.title
    valueHtml.value = topic?.value?.content
    cate.value = topic?.value?.cate
  }
})

</script>

<style scoped lang="scss">
.draft li {
  display: grid;
  grid-template-columns: 1fr 8fr;
  margin-bottom: 2rem;
  @media screen and (max-width:640px) {
    grid-template-columns: 2fr 7fr;
  }
  @media screen and (min-width:640px) and (max-width:768px) {
    grid-template-columns: 1.8fr 7.2fr;
  }
  @media screen and (min-width:1024px) and (max-width:1280px) {
    grid-template-columns: 1.5fr 7.5fr;
  }
  span{
    @media screen and (max-width:640px) {
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
    @media screen and (min-width:640px) and (max-width:768px) {
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
    @media screen and (min-width:768px) and (max-width:1024px) {
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
  }
}

.mb-w95{
  @media screen and (max-width:640px){
    width: 95%;
  }
}
</style>

<route lang="yaml">
meta:
  layout: home
</route>
